<template>
    <div class="notifications-page">
        <van-nav-bar title="Notifications" left-text="Back" left-arrow @click-left="$router.back()" />

        <div class="notifications-list">
            <div v-for="notification in notifications" :key="notification.id" class="notification-item"
                :class="{ unread: !notification.read }" @click="markAsRead(notification)">
                <div class="notification-icon">
                    <van-icon :name="notification.icon" :color="notification.color" />
                </div>
                <div class="notification-content">
                    <div class="notification-title">{{ notification.title }}</div>
                    <div class="notification-message">{{ notification.message }}</div>
                    <div class="notification-time">{{ formatTime(notification.timestamp) }}</div>
                </div>
                <div v-if="!notification.read" class="unread-dot"></div>
            </div>
        </div>

        <div v-if="notifications.length === 0" class="empty-state">
            <van-empty description="No notifications yet" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Notification {
    id: number
    title: string
    message: string
    timestamp: number
    read: boolean
    icon: string
    color: string
}

const notifications = ref<Notification[]>([
    {
        id: 1,
        title: 'Training Complete',
        message: 'You completed the Job Interview scenario!',
        timestamp: Date.now() - 2 * 60 * 60 * 1000,
        read: false,
        icon: 'success',
        color: '#07c160'
    },
    {
        id: 2,
        title: 'New Achievement',
        message: 'You unlocked the "Confident Speaker" badge!',
        timestamp: Date.now() - 5 * 60 * 60 * 1000,
        read: true,
        icon: 'medal-o',
        color: '#f39c12'
    }
])

const markAsRead = (notification: Notification) => {
    notification.read = true
}

const formatTime = (timestamp: number) => {
    const now = Date.now()
    const diff = now - timestamp
    const hours = Math.floor(diff / (1000 * 60 * 60))

    if (hours < 1) {
        return 'Just now'
    } else if (hours < 24) {
        return `${hours}h ago`
    } else {
        const days = Math.floor(hours / 24)
        return `${days}d ago`
    }
}
</script>

<style lang="scss" scoped>
.notifications-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.notifications-list {
    padding: 16px;

    .notification-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        position: relative;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        &.unread {
            border-left: 4px solid #1989fa;
        }

        .notification-icon {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .notification-content {
            flex: 1;

            .notification-title {
                font-size: 16px;
                font-weight: 600;
                color: #323233;
                margin-bottom: 4px;
            }

            .notification-message {
                font-size: 14px;
                color: #646566;
                line-height: 1.4;
                margin-bottom: 8px;
            }

            .notification-time {
                font-size: 12px;
                color: #969799;
            }
        }

        .unread-dot {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: #1989fa;
            position: absolute;
            top: 16px;
            right: 16px;
        }
    }
}

.empty-state {
    padding: 40px 16px;
}
</style>